<template>
  <el-cascader :props="props" :options="options" :value="departmentId" separator="-" size="mini" class="inputW" @change="nodeChange">
  </el-cascader>
</template>

<script>
import {getDepartmentList} from '@/api/department'
import {transListToTreeData} from '@/utils/index'
export default {
  props:{
    departmentId:{
      type:Number,
      default:null
    }
  },
  data() {
    return {
      options:[],
      props:{
        label:'name',
        value:'id'
      },
    }
  },
  async created() {
    const list=await getDepartmentList()
    const result=transListToTreeData(list,0)
    this.options=result
  },
  methods:{
    nodeChange(value) {
      const id=value[value.length-1]
      this.$emit('update:departmentId',id)
    }
  }
}
</script>

<style scoped lang="scss">
.inputW {
  width: 380px
}
</style>